<template>
    <div class="role_box">
        <h1 class="role_title">权限管理表</h1>
        <div class="operate_box">
            <el-button type="primary" plain @click="addRole">新增</el-button>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="authname"
                label="权限名称">
            </el-table-column>
             <el-table-column
                prop="authdes"
                label="权限描述">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="operation"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="新增权限"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="form.authname"></el-input>
                </el-form-item>
                <el-form-item label="权限描述">
                    <el-input v-model="form.authdes"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAddRole">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    computed:{
    },
    data(){
        return {
            tableData:[{
                id:1,
                authname:'设计权限',
                authdes:'',
                createTime:'2019-11-18',
            }],
            dialogVisible:false,
            form:{
                authname:'',
                authdes:'',
                createTime:''
            }
        }
    },
    methods:{
        addRole(){
            this.dialogVisible = true;
            
        },
        submitAddRole(){
            let today = new Date();
            let y = today.getFullYear();
            let m = today.getMonth() + 1;
            let d = today.getDate();
            this.form.createTime = y+'-'+m+'-'+d
            this.form.status = this.form.status?0:1
            this.tableData.push(this.form)
            this.dialogVisible = false;
            //清空新增表单
            this.form = {
                typename:'',
                status:true,
                createTime:''
            }
        },
        deleteRow(index, tableData){
            tableData.splice(index,1);
        }
    }
}
</script>
<style  scoped>
.role_title{
    font-family: "微软雅黑",Arial,sans-serif,"PingFang SC";
    padding: 10px 0;
    background-color: #f0f0f0;
}
.operate_box{
    text-align: right;
    padding: 15px 0;
    border:1px solid #f0f0f0;
    border-top:0;
}
.operate_box>div{
    display: inline-block;
}
.el-table{
    margin-top:15px;
}
.el-dialog{
    border-radius: 10px;
}
.el-form{
    width:80%;
    margin:0 auto;
}
.el-form-item .el-form-item__content{
    text-align: left;
}
</style>